<template>
    <div class="doc-info" v-for="(item, index) in doc_info" :key="index" @click="jumpDetails(item)">
        <!--@click="jumpDetails(item)" -->
        <div class="doc-info-body">
            <div class="doc-info-msg">
                <span class="doc-info-msg-name">{{ item.name }}</span>
                <span class="doc-info-msg-title">{{ item.title }}</span>
                <span class="doc-info-msg-online">在线问诊></span>
                <br>
                <span class="doc-info-msg-department">{{ item.department }}</span>
                <span class="doc-info-msg-hospital">{{ item.hospital }}</span>
                <br>
                <span class="text">好评率：</span><span class="doc-info-msg-evaluate">{{ item.evaluate }}%</span>
                <span class="text" style="left: 90px;">服务人数：</span><span class="doc-info-msg-peopleServed">{{
                    item.peopleServed }}</span>
                <p>擅长：{{ item.intro }}</p>
            </div>
        </div>
        <div class="doc-info-img">
            <img src="@/assets/images/aboutDoctorPage/doc_man.png" v-if="item.gender == 0" style=" width: 100px;">
            <img src="@/assets/images/aboutDoctorPage/doc_woman.png" v-if="item.gender == 1" style="width: 100px;">
        </div>
    </div>

</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const doc_info = ref([{
    "name": "张盛",
    "title": "首席宠物医师",
    "department": "宠物科",
    "hospital": "重庆萌济医院",
    "evaluate": "98",
    "gender": "0",
    "peopleServed": 1000,
    "intro": "宠物皮肤病、消化系统疾病、呼吸系统疾病、行为问题、老年宠物护理等。",
    "jibing": {
        "jibing1": "皮肤病",
        "jibing2": "消化系统疾病"
    }
},
{
    "name": "冉军",
    "title": "宠物健康专家",
    "department": "宠物科",
    "hospital": "重庆萌济医院",
    "evaluate": "95",
    "gender": "0",
    "peopleServed": 1200,
    "intro": "宠物心脏疾病、糖尿病、肿瘤、行为矫正、老年宠物疾病管理等。",
    "jibing": {
        "jibing1": "心脏疾病",
        "jibing2": "糖尿病"
    }
},
{
    "name": "孙林娟",
    "title": "资深宠物医师",
    "department": "宠物科",
    "hospital": "重庆萌济医院",
    "evaluate": "93",
    "gender": "1",
    "peopleServed": 1100,
    "intro": "宠物行为问题、牙齿健康、肥胖管理、老年宠物护理等。",
    "jibing": {
        "jibing1": "行为问题",
        "jibing2": "牙齿健康"
    }
},
{
    "name": "顼宝玉",
    "title": "宠物疾病诊断专家",
    "department": "宠物科",
    "hospital": "重庆萌济医院",
    "evaluate": "91",
    "gender": "1",
    "peopleServed": 950,
    "intro": "宠物传染病、内分泌疾病、肿瘤、创伤处理等。",
    "jibing": {
        "jibing1": "传染病",
        "jibing2": "内分泌疾病"
    }
},
{
    "name": "宁侠",
    "title": "宠物营养顾问",
    "department": "宠物科",
    "hospital": "重庆萌济医院",
    "evaluate": "96",
    "gender": "1",
    "peopleServed": 1050,
    "intro": "宠物营养管理、肥胖预防、食物过敏、特殊饮食需求等。",
    "jibing": {
        "jibing1": "营养管理",
        "jibing2": "肥胖预防"
    }
},
{
    "name": "刘红梅",
    "title": "宠物行为矫正师",
    "department": "宠物科",
    "hospital": "重庆萌济医院",
    "evaluate": "94",
    "gender": "1",
    "peopleServed": 1150,
    "intro": "宠物行为矫正、焦虑管理、攻击性行为预防等。",
    "jibing": {
        "jibing1": "行为矫正",
        "jibing2": "焦虑管理"
    }
},
{
    "name": "洪霞",
    "title": "宠物心理健康专家",
    "department": "宠物科",
    "hospital": "重庆萌济医院",
    "evaluate": "92",
    "gender": "1",
    "peopleServed": 1020,
    "intro": "宠物心理问题、压力管理、分离焦虑等。",
    "jibing": {
        "jibing1": "心理问题",
        "jibing2": "压力管理"
    }
},
{
    "name": "司维",
    "title": "宠物急救专家",
    "department": "宠物科",
    "hospital": "重庆萌济医院",
    "evaluate": "90",
    "gender": "1",
    "peopleServed": 1010,
    "intro": "宠物急救、创伤处理、中毒处理等。",
    "jibing": {
        "jibing1": "急救",
        "jibing2": "创伤处理"
    }
}]);

const router = useRouter();
const jumpDetails = (doctor) => {
    router.push({
        path: '/docPerInfo',
        query: {
            doctor: encodeURIComponent(JSON.stringify(doctor))
        }
    })
}

</script>

<style lang="less" scoped>
.doc-info {
    height: 131.5px;
    width: 340px;
    margin-left: 20.25px;
    margin-top: 20px;
    overflow-y: hidden;
    position: relative;

    .doc-info-body {
        height: 120px;
        width: 340px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25), 0px 2px 4px rgba(0, 0, 0, 0.25);
        position: relative;

        .doc-info-msg {
            position: absolute;
            top: 10px;
            left: 10.5px;
            padding: 0;
            margin: 0;

            span {
                // span标签的统一样式
                font-size: 12px;
                position: absolute;
                font-weight: 500;
            }

            .doc-info-msg-name {
                /** 文本1 */
                font-size: 14px;
                font-weight: 900;
            }

            .doc-info-msg-title {
                left: 60px;
            }

            .doc-info-msg-online {
                left: 160px;
            }

            .doc-info-msg-department {
                top: 31px;
            }

            .doc-info-msg-hospital {
                top: 31px;
                left: 45px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap; // 单行显示
            }
            .text {
                top: 55px;
            }

            .doc-info-msg-evaluate {
                top: 46px;
                left: 48px;
                font-size: 12px;
                font-weight: 900;
                letter-spacing: 0px;
                line-height: 34.49px;
                color: rgba(103, 140, 24, 1);
            }

            .doc-info-msg-peopleServed {
                top: 46px;
                left: 150px;
                font-size: 12px;
                font-weight: 900;
                letter-spacing: 0px;
                line-height: 34.49px;
                color: rgba(103, 140, 24, 1);
            }

            p {
                position: relative;
                top: 40px;
                font-size: 12px;
                width: 220px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    .doc-info-img {
        position: absolute;
        top: 0px;
        left: 230px;
        width: 100px;
    }
}
</style>